<template>
    <el-dialog
        title="新建任务"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
        width="30%"
        :before-close="handleClose"
        class="create-mission-dialog">
        <div class="create-mission-dialog-body">
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="关键字" prop="keyword">
                    <el-input v-model="form.keyword"></el-input>
                </el-form-item>
                <el-form-item label="条目数">
                    <el-input-number v-model="form.num" :min="1" :max="100"></el-input-number>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="handleSubmit">创建</el-button>
            <el-button type="submain" @click="handleClose">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { resetObject } from "@/utils";
export default {
    name: "RokuhentaiDialog",

    data () {
        return {
            form: {
                keyword: "",
                num: 1
            },
            rules: {
                keyword: [{ required: true, message: "请输入关键字", trigger: "blur" }]
            },
            dialogVisible: false
        };
    },

    created () {},

    mounted () {},

    methods: {
        /* 触发弹窗 */
        open () {
            this.dialogVisible = true;
        },

        /* 提交任务 */
        handleSubmit () {
            this.$refs["form"].validate((valid) => {
                if (!valid) {
                    this.$message.error("请输入关键字");
                    return false;
                }
                else this.createMission();
            });
        },
        createMission () {
            const params = {
                keyword: this.form.keyword,
                num: this.form.num
            };
            this.$request.post(this.API.BUSINESS_ROKUHENTAI. params).then(res => {
                if (res.success) {
                    this.$message.success("创建成功");
                    this.handleClose();
                }
            });
        },

        /* 关闭对话框 */
        handleClose () {
            this.dialogVisible = false;
            resetObject(this.form);
        }
    }
}
</script>

<style lang="scss">
.create-mission-dialog {
}
</style>